<template>
  <div>
    <baidu-map
      :center="center"
      :zoom="15"
      @click="click"
      :scroll-wheel-zoom="true"
    >
      <bm-view class="map1"></bm-view>
      <bm-marker :position="center1" :dragging="false">
        <bm-info-window
          :show="show"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          
          >{{ area }}</bm-info-window
        ></bm-marker
      >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

      <bm-driving
        :start="numberValidateForm.senderAddress"
        :end="numberValidateForm.recipientAddress"
        :startCity="numberValidateForm.senderArea"
        :endCity="numberValidateForm.recipientArea"
        :auto-viewport="true"
        policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
        :panel="false"
        location="中国"
        :waypoints="routeArea"
        :selectFirstResult="true"
      >
      </bm-driving>
    </baidu-map>
  </div>
</template>
<script>
import { ViewMapAPI } from "@/request/api";
export default {
  props: ["numberValidateForm"],
  data() {
    return {
      show: false,

      center: { lng: 116.404, lat: 39.915 },
      center1: { lng: 116.404, lat: 39.915 },
      area: "",
      routeArea: [],
    };
  },
  created() {
    console.log(this.numberValidateForm.orderNumber);

    ViewMapAPI({
      params: {
        orderNumber: this.numberValidateForm.orderNumber,
      },
    }).then((res) => {
      this.routeArea = res.data.data;

      console.log(this.routeArea);
    });
  },
  methods: {
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },

    click(e) {
      this.show = false;
      let geocoder = new window.BMap.Geocoder(); //创建地址解析器的实例
      geocoder.getLocation(e.point, (rs) => {
        console.log(rs);
        this.center1.lng = rs.point.lng;
        this.center1.lat = rs.point.lat;
        if (rs.addressComponents.province == rs.addressComponents.city) {
          rs.addressComponents.city = "市辖区";
        }
        this.area =
          rs.addressComponents.province +
          "-" +
          rs.addressComponents.city +
          "-" +
          rs.addressComponents.district;

        //向父组件传解析的地址
        this.$emit("addresschange", this.area);
        this.show = true;
      });
    },
  },
};
</script>
<style>
.map1 {
  width: 100%;
  height: 400px;
}
</style>